<template>
  <div class="migration_list table-theme">
    <head-title title="审核--用户迁徒审核"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
            :option-list="typeList"
            :value="form.status"
            placeholder="审核状态"
            type="status"
            label-name="name"
            value-name="id"
            @value="setSelectValue"
          >
          </select-view>
          <el-button type="primary" @click="allPass">批量通过</el-button>
          <el-button type="danger" @click="allDel">批量删除</el-button>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总条数：{{ count }}</p>
      <el-table :data="list" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="用户序号"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="100">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.user.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center" prop="user.nickname">
        </el-table-column>
        <el-table-column label="公司" align="center" prop="name">
        </el-table-column>
        <el-table-column
          label="店铺名称"
          align="center"
          prop="store_name"
        ></el-table-column>
        <el-table-column label="状态" align="center" prop="status_name">
        </el-table-column>
        <el-table-column label="操作" align="center" width="380">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status == 0"
              @click="onPass(scope.row.examine_id)"
              >通过</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status == 0"
              @click="onShowDialog(scope.row.examine_id)"
              >拒绝</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="onDel(scope.row.examine_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          @current-change="init"
          :current-page="form.page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="用户迁移拒绝"
      :close-on-click-modal="false"
      :visible.sync="userInfoDialog"
      width="500px"
      center
      :modal-append-to-body="false"
    >
      <div class="user-info">
        <el-form
          :model="refuseForm"
          ref="refuseForm"
          :rules="refuseFormRules"
          label-width="120px"
        >
          <el-form-item label="拒绝原因：" prop="reason">
            <el-input
              v-model="refuseForm.reason"
              placeholder="请填写拒绝原因"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="onRefuse('refuseForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SelectView from "@/components/SelectView";
export default {
  name: "",
  components:{
    SelectView
  },
  data() {
    return {
      form: {
        page: 1,
        status: 0,
      },
      typeList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "待审核",
        },
        {
          id: 2,
          name: "审核通过",
        },
        {
          id: 3,
          name: "审核不通过",
        },
      ],
      searchOption: [
        {
          value: 0,
          label: "用户ID",
        },
      ],
      classSelect: 0,
      selectContent: "",
      list: [],
      count: 0,
      refuseForm: {
        examine_id: "",
        reason: "",
      },
      userInfoDialog: false,
      refuseFormRules: {
        reason: [
          { required: true, message: "请输入拒绝原因", trigger: "blur" },
        ],
      },
      batchList: [],
    };
  },
  methods: {
    init(e) {
      if (e) {
        this.form.page = e;
      }
      let data = {
        page: this.form.page - 1,
        status: this.form.status == 0 ? "" : this.form.status - 1,
        limit: 10,
      };
      if (this.classSelect == 0) {
        data.user_id = this.selectContent;
      }
      this.$http(this.$ApiList.UserExamineList, data).then((res) => {
        this.list = res.datas.list;
        this.count = res.datas.count;
      });
    },
    roleType() {
      this.form.page = 1;
      this.init();
    },
    refreshPage() {
      this.classSelect = 0;
      this.selectContent = "";
      this.form.status = 0;
      this.form.page = 1;
      this.init();
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    // 通过
    onPass(examine_id) {
      this.$http(this.$ApiList.UserExamineSuccess, { examine_id }).then(
        (res) => {
          this.$message({
            message: res.datas,
            type: "success",
          });
          this.init();
        }
      );
    },
    // 删除
    onDel(examine_id) {
      this.$confirm("此操作将删除此条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(this.$ApiList.UserExamineDelete, { examine_id }).then(
            (res) => {
              this.$message({
                message: res.datas,
                type: "success",
              });
              this.init();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 拒绝
    onRefuse(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$http(this.$ApiList.UserExamineRefuse, this.refuseForm).then(
            (res) => {
              this.$message({
                message: res.datas,
                type: "success",
              });
              this.refuseForm.examine_id = "";
              this.refuseForm.reason = "";
              this.userInfoDialog = false;
              this.init();
            }
          );
        }
      });
    },
    // 显示弹窗
    onShowDialog(examine_id) {
      this.userInfoDialog = true;
      this.refuseForm.examine_id = examine_id;
    },
    // 多选
    handleSelectionChange(val) {
      this.batchList = val;
    },
    // 批量删除
    allDel() {
      if (!this.batchList.length) {
        this.$message({
          message: "请选择数据",
          type: "error",
        });
        return;
      }
      let examine_id = [];
      this.batchList.forEach((item) => {
        examine_id.push(item.examine_id);
      });
      this.onDel(examine_id.join(","));
    },
    // 批量通过
    allPass() {
      if (!this.batchList.length) {
        this.$message({
          message: "请选择数据",
          type: "error",
        });
        return;
      }
      let examine_id = [];
      for (let index = 0; index < this.batchList.length; index++) {
        if (this.batchList[index].status != 0) {
          this.$message({
            type: "error",
            message: "您已选中已操作的数据",
          });
          return false;
        }
        examine_id.push(this.batchList[index].examine_id);
      }
      this.onPass(examine_id.join(","));
    },
    setSelectValue(obj) {
      const { type, value } = obj;
      switch (type) {
        case "status":
          this.form.status = value;
          break;

        default:
          break;
      }
      this.init();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.migration_list {
}
</style>